<template>
  <div class="reportRight item-space">
    <div class="wholeTitle borderBottom flex">
      <div v-for="(item,index) in fileStore.reportLeftItem.fullPath">
        {{ item }}{{ index == fileStore.reportLeftItem.fullPath.length - 1 ? '' : '/' }}
      </div>
    </div>
    <div class="content">
      <div class="top flex flex-align-center">
        <div class="flex flex-align-center" style="width: 20%">
          <div class="labelText">报表名称：</div>
          <el-input class="flex1 ml-2" placeholder="请输入报表名称" v-model="fileStore.reportFileName"
                    clearable></el-input>
        </div>
        <div class="flex flex-align-center ml-4" style="width: 40%">
          <div class="labelText">创建时间：</div>
          <el-date-picker
              size="large"
              v-model="fileStore.reportFileCreateTime"
              type="datetimerange"
              @change="chooseDate"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              clearable
              unlink-panels
          />
        </div>

        <!--        <button class="btn-baseStyle ml-4" style="background-color:#007FFF">查询</button>-->
        <button class="btn-baseStyle ml-4" style="background-color:#007FFF" @click="inquire">查询</button>
        <button class="btn-baseStyle ml-4" style="background-color:#13CE66" @click="upLoad">上传报表</button>
        <button class="btn-baseStyle ml-4" style="background-color:#F88B17">
          <a target="_blank"
             :href="`/reportApi/report/reportfile/download/file?fileIds=${fileStore.fileRemoveIds.join(',')}&rrtoken=${token.value}`"
             class="tableScopeText" style="text-decoration: none;color: white">批量下载</a>
        </button>
        <button class="btn-baseStyle ml-4" style="background-color:#FF4949" @click="removeFile(2,0)">批量删除</button>
      </div>
      <div class="bottom mt-8 flex ">
        <div class="left mr-6 tableUIReset" id="autoHeight">
          <el-table
              v-loading="fileStore.tableLoading"
              stripe
              :data="fileStore.fileReportList"
              border
              style="width: 100%"
              header-row-class-name="rptableClassNmae"
              @selection-change="handleSelectionChange"
              :height="500"
          >
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column prop="index" label="序号" width="90" header-align="center" align="center">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column sortable v-for="(item,index) in headers" :prop="item.prop"
                             :label="item.name" :key="item.prop" header-align="center" align="center"/>
            <el-table-column label="操作" align="center" header-align="center">
              <template #default="scope">
                <div class="flex flex-justify-content-center">
                  <div class="flex">
                    <a target="_blank"
                       :href="`/reportApi/report/reportfile/download/file?fileIds=${scope.row.id}&rrtoken=${token.value}`"
                       class="tableScopeText" style="text-decoration: none">下载</a>
                    <div class="tableScopeText ml-2 mr-2">|</div>
                    <div class="tableScopeText pointer" @click="removeFile(1,scope.row.id)">删除</div>
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="paginationFooter mt-10">
            <el-pagination
                :small="true"
                v-model:current-page="fileStore.page"
                v-model:page-size="fileStore.limit"
                :page-sizes="[50,100, 200, 300, 400]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="fileStore.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <upload-dialog ref="upLoadDialog"></upload-dialog>
  </div>
</template>

<script setup lang="ts">
//组件
import RpMenuItem from "@/components/contentRight/rprightMenuItem.vue";
//接口


//api
import {reactive, ref, onMounted, defineProps} from 'vue';
import {timestampToDate} from "@/utils/dateUtilsT";
import useReportStore from "@/store/modules/report/report";
import type {rpResultData} from "@/api/reportCom/type";
import {ListByReportList, ListByReportParams, rpDirDataType} from "@/api/reportCom/type";
import * as XLSX from "xlsx";
import {ElMessage, ElMessageBox} from "element-plus";
import UploadDialog from "@/views/report/components/uploadDialog.vue";
import useFileStore from "@/store/modules/file/file";
import {cookie} from "@/utils/cookie";
//data
let date = ref<string>('')
let height = ref<number | string>('auto')
let reportStore = useReportStore()
let fileStore= useFileStore()
let props = defineProps<{
  menuRightList?: rpResultData[]
}>()
let token = cookie.getCookie('token')

let defaultOpeneds = ref<string[]>([])

let headers = ref<{ name: string, prop: string }[]>([
  {
    name: '报表名称',
    prop: 'filename'
  },
  {
    name: '创建用户',
    prop: 'createBy'
  },
  {
    name: '创建时间',
    prop: 'createTime'
  }
])

let upLoadDialog = ref()
// defaultOpeneds.value=fileStore.defaultOpends


/**************************接口函数**************************/


/**************************操作函数**************************/



//选择日期
const chooseDate = (date: Date) => {
}

//查询
const inquire = () => {
  fileStore.useListByReport()
}


//查看
const lookDetail = () => {
  let params: ListByReportParams
}

//选中
const handleSelectionChange = (val: ListByReportList[]) => {
  fileStore.fileRemoveIds = []
  if (val.length > 0) {
    val.forEach((item, index) => {
      fileStore.fileRemoveIds.push(item.id)
    })
  }
  console.log(fileStore.fileRemoveIds)
}

//删除
const removeFile = (isTable: number, id: number) => {
  if (fileStore.fileRemoveIds.length == 0 && isTable === 2) {
    ElMessage({
      message: '请先选中文件再点击批量删除按钮',
      type: 'error',
    })
    return
  }
  ElMessageBox.confirm(
      `请问你是否删除${isTable == 1 ? '该' : '以下'}选中的文件？`,
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    if (isTable === 1) {
      console.log(id)
      fileStore.useBatchRemoveFile([id])
    } else {
      fileStore.useBatchRemoveFile(fileStore.fileRemoveIds)
    }
  }).catch((error) => {
    console.log(error)
    ElMessage({
      message: '删除失败' + error,
      type: 'error',
    })
  })
}

//上传文件
const upLoad = () => {
  upLoadDialog.value.init()
}

//分页
const handleSizeChange = () => {
  fileStore.useListByReport()
}
const handleCurrentChange = () => {
  fileStore.useListByReport()
}

onMounted(() => {

})
fileStore.$subscribe(() => {
  let box = document.getElementById('autoHeight')
  let s = box!.getElementsByClassName('el-table--border')
  if ((s[0] as HTMLDivElement).offsetHeight > 500) {
    height.value = 500
  }else{
    height.value='auto'
  }
})
</script>

<style lang="scss" scoped>
.reportRight {
  width: 82%;



  .content {

    .top {
      .labelText {
        font-size: 18px;
      }
    }

    .bottom {
      .left {
        width: 100%;

      }

    }
  }
}
</style>
